<template>
  <page-view class="flex flex-col">
    <title-bar>影厅</title-bar>
    <div class="content-box overflow-auto flex-1">
      <van-pull-refresh @refresh="onRefresh" v-model="isLoading">
        <van-list class="px-[10px]" v-model:loading="isLoading"
          @load="loadNextPage"
          :finished="queryParams.pageIndex>=hallInfoList.pageCount"
          finished-text="我是有底线的"
          loading-text="正在加载数据···"
          :offset="20">
          <div class="border-0 border-b border-solid border-gray-300 pb-[10px]"
            v-for="item in hallInfoList.listData" :key="item.id">
            <div class="text-[14px] pt-[5px]">
              {{item.hall_name}}
            </div>
            <div class="text-gray-500 text-[12px] pt-[5px] truncate">
              {{item.address}}
            </div>
            <div class="tags">
              <div v-for="tag in item.tags.split(',')" :key="tag">{{tag}}</div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>

    </div>
  </page-view>
</template>
<script setup>
import { reactive, ref } from "@vue/reactivity";
import titleBar from "../components/title-bar.vue";
import API from "../utils/API";
let queryParams = reactive({
  pageIndex: 1,
  hall_name: "",
});
let hallInfoList = reactive({
  listData: [],
  pageCount: 0,
});

const isLoading = ref(false);
const queryData = () => {
  isLoading.value = true;
  API.hallInfo
    .getListByPage(queryParams)
    .then((result) => {
      hallInfoList.listData = hallInfoList.listData.concat(
        result.data.listData
      );
      hallInfoList.pageCount = result.data.pageCount;
    })
    .finally(() => {
      isLoading.value = false;
    });
};

queryData();

const loadNextPage = () => {
  console.log("下一页", new Date());
  queryParams.pageIndex++;
  queryData();
};

const onRefresh = ()=>{
  queryParams.pageIndex = 1;
  hallInfoList.listData = [];
  queryData();
}
</script>
<style scoped lang="scss">
.tags {
  @apply flex flex-row pt-[5px];
  div {
    @apply mr-[2px] px-[4px] text-[12px] border border-solid border-current odd:text-warningColor even:text-successColor transform scale-90;
  }
}
</style>